<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>规则设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <!-- 卡片开始 -->
      <el-card class="box-card">
        <!-- 导航开始 -->
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程类型设置" name="first">课程类型设置</el-tab-pane>
            <el-tab-pane label="提醒设置" name="second">提醒设置</el-tab-pane>
            <el-tab-pane label="校区展示设置" name="third">校区展示设置</el-tab-pane>
            <el-tab-pane label="安全密码设置" name="fourth">安全密码设置</el-tab-pane>
            <el-tab-pane label="积分设置" name="six">
              <div class="six_box">
                <h2>积分抵扣规则</h2>
                <div class="six_box_container">
                  <h4>积分抵扣比例</h4>
                  <span @click="setDialogVisible=true">设置</span>
                  <p>已设置<strong>{{this.tabList[0].money}}</strong>积分抵扣<strong>{{this.tabList[0].num}}</strong>元</p>
                </div>

                <div class="six_box_container">
                  <h4>购买课程是否可以积分抵扣</h4>
                  <span>
                    <el-switch v-model="value" active-color="#ff0000" inactive-color="#ccc"></el-switch>
                  </span>
                  <p>开启后，报名购买课程、组合包，续费将允许积分抵扣</p>
                </div>

                <div class="six_box_container">
                  <h4>购买课程是否可以积分抵扣</h4>
                  <span>
                    <el-switch v-model="value1" active-color="#ff0000" inactive-color="#ccc"></el-switch>
                  </span>
                  <p>开启后，报名购买商品，商城购买商品将允许积分抵扣</p>
                </div>
              </div>

              <div class="six_box">
                <h2>积分获取规则</h2>
                <div class="six_box_container">
                  <h4>购买课程获取积分</h4>
                  <span>
                    <el-switch v-model="value2" active-color="#ff0000" inactive-color="#ccc"></el-switch>
                  </span>
                  <div class="six_box_container_right">
                    <p>
                      实付金额
                      <em>{{this.tabList[0].money}}</em>元，增加
                      <em>{{this.tabList[0].num}}</em>分
                    </p>
                    <p>开启后，报名购买课程、组合包，续费，批量报名，微信端报名将自动给学生增加积分</p>
                  </div>
                </div>
                <div class="six_box_container">
                  <h4>购买商品获取积分</h4>
                  <span>
                    <el-switch v-model="value3" active-color="#ff0000" inactive-color="#ccc"></el-switch>
                  </span>
                  <div class="six_box_container_right">
                    <p>
                      实付金额
                      <em>{{this.tabList[0].money}}</em>元，增加
                      <em>{{this.tabList[0].num}}</em>分
                    </p>
                    <p>开启后，报名购买商品，商城购买商品将自动给学生增加积分</p>
                  </div>
                </div>
                <div class="six_box_container">
                  <h4>签到获取积分</h4>
                  <span>
                    <el-switch v-model="value4" active-color="#ff0000" inactive-color="#ccc"></el-switch>
                  </span>
                  <div class="six_box_container_right">
                    <p>
                      实付金额
                      <em>{{this.tabList[0].money}}</em>元，增加
                      <em>{{this.tabList[0].num}}</em>分
                    </p>
                    <p>开启后，排课签到、临时签到、任意上课签到将自动给学生增加积分</p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="更多设置" name="seven">更多设置</el-tab-pane>
          </el-tabs>
        </template>
      </el-card>

      <!-- 设置 -->
      <el-dialog title="设置积分抵扣比例" :visible.sync="setDialogVisible" width="50%">
        <!-- 内容主题 -->
        <el-form :model="setForm">
          <div class="el-form-top">
            <el-form-item label="" prop="money">
              <el-input v-model="setForm.money"></el-input>
            </el-form-item>
            <strong>积分抵扣</strong>
            <el-form-item label="" prop="num">
              <el-input v-model="setForm.num"></el-input>
            </el-form-item>
            <strong>分</strong>
          </div>
          <p>
            例如 1:1，10：1，100：1
            <br />积分设置后，不可修改，请谨慎设置
          </p>
        </el-form>

        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="setDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveset">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      tabList: [{ money: 100, num: 1 }],
      activeName: "six",
      value: true,
      value1: false,
      value2: false,
      value3: false,
      value4: false,
      setDialogVisible: false,
      // 编辑表单数据
      setForm: {
        money: "100",
        num: "1",
      },
    };
  },
  methods: {
    handleClick(tab, event) {},
    // 保存编辑
    saveset() {
      this.setDialogVisible = false;
      this.$set(this.setForm);
      console.log(this.setForm)
      this.tabList[0].money=this.setForm.money;
      this.tabList[0].num=this.setForm.num;
    },
  },
};
</script>
<style scoped>
p em{
  font-style:normal;
  color: rgb(255, 0, 0);
}
.el-breadcrumb {
  line-height: 65px;
  font-size: 14px;
  font-weight: normal;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-form-top{
  display: flex;
  align-items: center;
}

.six_box {
  margin-bottom: 15px;
}
.six_box h2 {
  font-size: 16px;
  font-weight: bolder;
  color: #000;
  margin-left: 15px;
}
.six_box_container {
  width: 100%;
  display: flex;
  padding: 15px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 14px;
  color: #000;
  align-items: center;
}
.six_box_container h4 {
  font-weight: normal;
  width: 280px;
}
.six_box_container span {
  color: #ff0000;
  margin-right: 30px;
  cursor: pointer;
  width: 120px;
}
.six_box_container strong {
  color: #ff0000;
  font-size: 18px;
  padding: 0 2px;
}
.el-form p {
  /* margin-top: 20px; */
  line-height: 28px;
}
.six_box_container_right p em {
  font-style: normal;
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #e4e4e4;
  text-align: center;
  margin: 0 5px 5px 5px;
  border-radius: 4px;
}
.el-form {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
}
.el-form strong {
  font-weight: normal;
  margin: 0 5px;
}
.el-input {
  width: 120px;
}
.el-dialog__body {
  padding: 10px 0;
}
.el-button--primary,
.el-button--primary:hover {
  border: 1px solid red;
  background: red;
}
</style>
